<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home - Puppertino Framework</title>
    <link
      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900:500,800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" type="text/css" href="../dist/buttons.css" />
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
    />
    <meta
      name="description"
      content="Have you ever thought: Man, I would love a macOS based Framework? Fear not, Puppertino is here!"
    />
    <style type="text/css">
      :root {
        --text_color: #252525;
        --bg_page_color: #f5f5f5;
      }
      body {
        margin: 0px;
        --font: "Inter", sans-serif;
        background: var(--bg_page_color);
      }
      img {
        display: block;
        margin: auto;
        max-width: 100%;
      }
      .text_black {
        color: var(--text_color);
      }
      .cta_pupper {
        height: 100vh;
        background: url("../landing-images/pupper_cta.jpg"), #000;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% -30%;
      }
      h1,
      h2,
      h3,
      h4,
      a,
      p {
        font-family: -apple-system, "Inter", sans-serif;
      }
      h1 {
        padding-top: 20vh;
        margin-top: 0;
        margin-bottom: 10px;
        display: block;
        color: white;
        font-size: 70px;
      }
      h2 {
        font-size: 50px;
      }
      p {
        font-size: 20px;
      }
      .cta_pupper p {
        color: white;
      }
      .cta_pupper {
        text-align: center;
      }
      .p-btn-round {
        border-radius: 50px;
        border: 0px;
        padding: 10px 30px;
      }
      .p-link {
        color: #f5f5f5;
        font-size: 15px;
        text-decoration: none;
      }
      .p-link:hover {
        text-decoration: underline;
      }
      .title {
        text-align: center;
        display: block;
        width: 100%;
      }
      .speed_boye {
        height: 30vh;
        background: url("../landing-images/speed.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 15vh 0vw;
      }
      .container-no-pad .row {
        margin: 0px;
      }
      .speed_h2,
      .speed_p {
        color: #f5f5f5;
        text-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
      }
      .speed_h2 {
        margin-bottom: 10px;
      }
      .speed_p {
        margin: 0;
      }
      .pad_5 {
        padding: 10vh 0vw 20vh;
      }
    </style>
  </head>
  <body>
    <div class="cta_pupper">
      <h1>Your websites. Better.</h1>
      <p>
        Separate yourself from the rest. Create something unique with
        <span>Puppertino</span>
      </p>
      <a href="#what" class="p-btn p-prim-col p-btn-round">Learn more</a>
      <a href="examples/" class="p-link">Read the docs</a>
    </div>
    <div class="container-no-pad pad_5">
      <div class="row around-xs middle-xs">
        <h2 class="title text_black">More than a framework</h2>
        <div class="col-xs-9 col-md-3">
          <img src="../landing-images/apple.png" />
        </div>
        <div class="col-xs-9 col-md-5">
          <p class="text_black">
            Puppertino is a framework designed based on the
            <strong>Human guidelines</strong> and
            <strong>iOS and macOS</strong> from Apple, while adding our own
            flavor to the mix.<br /><br />
            That doesn't mean that it's a direct rip-off of everything you would
            find in the Human Guidelines. We work hard to feature components
            that will be neccesary to build apps or websites.<br /><br />Puppertino
            is built to work with any framework available, so if you use
            <strong
              >Bootstrap, Bulma, Flexbox Grid, Skeleton, or any
              framework</strong
            >, you should still be able to use Puppertino without problems.<br /><br />Last
            but not least, Puppertino is <strong>modular</strong>, so if you
            only want buttons, or form elements, you can just use them.
          </p>
        </div>
      </div>
    </div>
    <div class="speed_boye container-no-pad">
      <div class="row">
        <div class="col-md-offset-1 col-md-5">
          <h2 class="speed_h2">Focused on speed.</h2>
          <p class="speed_p">
            Puppertino weights less than 50KB, making your website shine even in
            the worst connections.
          </p>
        </div>
      </div>
    </div>

    <div class="container-no-pad pad_5">
      <h2 class="title text_black">Enhace your apps.</h2>
      <div class="row around-xs">
        <div class="col-xs-9 col-md-5">
          <p class="text_black">
            If you are creating WebApps, you can use Puppertino to make your
            apps look more like a native app without having to style a lot of
            things.<br /><br />
            And if you are creating a website for a macOS / iOS app, Puppertino
            can help you make it look nice without having to import a big
            framework.<br /><br />Don't know where to start? Check these:
          </p>
          <a href="#" class="p-btn p-prim-col">Examples</a>
          <a href="#" class="p-btn">Documentation</a>
        </div>
        <div class="col-xs-9 col-md-5">
          <img src="../landing-images/devices.png" />
        </div>
      </div>
    </div>
  </body>
</html>
